{extend name="public/world"}
{block name="title"}添加广告{/block}
{block name="style"}
<style type="text/css">
    .layui-form-label {width:110px;}
</style>
{/block}
{block name="container"}
<div class="layui-form" lay-filter="layuiadmin-form-useradmin" id="layuiadmin-form-useradmin">
    <div class="layui-card" style="padding: 20px 0 0 0;height:495px;">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">广告名称</label>
                <div class="layui-input-inline" style="width: 300px;">
                    <input type="text" name="name" value="" lay-verify="required" placeholder="请输入广告名称" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">生效周期</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="start_at" value="" lay-verify="required" placeholder="开始时间" autocomplete="off" id="laydate-start" lay-key="1" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">～</div>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="end_at" value="" lay-verify="required" placeholder="截止时间" autocomplete="off" id="laydate-end" lay-key="2" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">广告客户</label>
                <div class="layui-input-inline">
                    <select name="user_id" lay-verify="required" lay-search>
                        <option value="">请选择客户</option>
                        <option value="0">公司自用广告</option>
                        {volist name="users" id="user"}
                        <option value="{$user.id}">{$user.name}-{$user.phone}-{$user_types[$user.type]}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">* 需提前在【基础数据】中维护供应商、代理商及客户信息</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">应用场景</label>
                <div class="layui-input-inline">
                    <select name="scene" lay-filter="scene" lay-verify="required" lay-search>
                        <option value="">请选择应用场景</option>
                        {volist name="advert_scenes" id="scene"}
                        <option value="{$key}" data-desc="{$scene.desc}">{$scene.name}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux" id="scene_desc"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">广告分类</label>
                <div class="layui-input-inline">
                    <select name="tid" lay-verify="required" lay-search>
                        <option value="">请选择分类</option>
                        {volist name="treeData" id="tree"}
                        {notempty name="tree.children"}
                        <option value="{$tree.id}" disabled>{$tree.name}</option>
                        {volist name="tree.children" id="child"}
                        <option value="{$child.id}">　　{$child.name}</option>
                        {/volist}
                        {else /}
                        <option value="{$tree.id}">{$tree.name}</option>
                        {/notempty}
                        {/volist}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">主题类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required" lay-search>
                        <option value="">请选择主题</option>
                        {volist name="advert_type" id="type"}
                        <option value="{$key}">{$type}</option>
                        {/volist}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">收费方式</label>
                <div class="layui-input-inline">
                    <select name="sys" lay-verify="required" lay-search>
                        <option value="">请选择收费方式</option>
                        {volist name="advert_sys" id="type"}
                        <option value="{$key}">{$type}</option>
                        {/volist}
                    </select>
                </div>
                <div class="layui-input-inline" style="width: 80px;">
                    <input type="text" name="price" value="" lay-verify="number" placeholder="广告费用" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">元【费用/单价】(按次为单价)</div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label label-required">展示时长</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <input type="text" name="times" value="" lay-verify="number" placeholder="展示时长" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">秒【只能在3~15秒之间】</div>
            </div>
        </div>
        <div class="layui-form-item upload">
            <label class="layui-form-label label-required">广告资源</label>
            <div class="layui-input-inline" style="width:400px;">
                <input name="imgs" placeholder="广告资源" value="" lay-verify="required" class="layui-input upload-input">
            </div>
            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                <button type="button" class="layui-btn layui-btn-primary layui-upload" lay-data="{ exts:'jpg|png|gif|jpeg', accept:'image'}">
                    <i class="layui-icon">&#xe67c;</i>上传素材
                </button>
                <input class="layui-upload-file" type="file" accept="undefined" name="file">
                <button type="button" class="layui-btn layui-btn-primary" layadmin-event="avartatPreview">查看</button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label label-required">链接地址</label>
            <div class="layui-input-inline" style="width:400px;">
                <input name="url" placeholder="链接地址" value="" lay-verify="required" class="layui-input upload-input">
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="LAY-front-submit" id="LAY-front-submit" value="确认">
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    //JavaScript代码区域
    layui.use(['form', 'upload', 'laydate'], function() {
        var $ = layui.$
            , s = layui.upload
            , laydate = layui.laydate
            , form = layui.form;
        form.on('select(scene)', function(data){
            $('#scene_desc').text(data.elem[data.elem.selectedIndex].getAttribute("data-desc"));
        });
        s.render({
            elem: '.layui-upload',
            url: '/upload/upload.html'
            ,method: 'post'
            , accept: 'images' /* 只能图片 */
            , exts: 'jpg|png|jpeg'
            , acceptMime: 'image/*'
            , multiple: true
            , size: 1024 * 4 /* 设置上传单一文件最大尺寸*/
            ,data: {
                path:'advert'
            }
            ,before: function(input) {
                layer.msg('文件上传中...', {time:3000000});
            }
            ,done: function(res, index, upload) {
                var obj = this.item;
                if (res.code == 0) {
                    layer.msg(res.msg);
                    return false;
                }
                layer.closeAll();
                var input = $(obj).parents('.upload').find('.upload-input');
                if ($(obj).attr('lay-type') == 'image') {
                    input.siblings('img').attr('src', res.data.file).show();
                }
                input.val(res.data.file);
            }
        });
        //开始日期
        var insStart = laydate.render({
            elem: '#laydate-start'
            ,min: '2020-12-31'
            ,type: 'date'
            //,value: new Date()
            ,done: function(value, date){
                //更新结束日期的最小日期
                insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });
        //结束日期
        var insEnd = laydate.render({
            elem: '#laydate-end'
            ,min: '2020-12-31'
            ,type: 'date'
            ,done: function(value, date){
                //更新开始日期的最大日期
                insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });
    });
</script>
{/block}